
<template>
  <div class="video-panel">
    <el-form label-width="80px" :model="data" size="small">
      <el-form-item label="视频地址">
        <el-input 
          v-model="data.src" 
          placeholder="请输入视频地址"
        >
          <template #append>
            <el-button @click="selectVideo">确认</el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="封面图片">
        <ImagePicker 
          ref="imagePickerRef" 
          @select="handleImageSelect" 
          :initial-image="data.coverUrl ? { url: data.coverUrl } : null"
        />
      </el-form-item>

      <el-form-item label="视频高度">
        <el-slider 
          v-model="data.height" 
          :min="100" 
          :max="400" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="背景颜色">
        <el-color-picker v-model="data.backgroundColor" />
      </el-form-item>

      <el-form-item label="圆角大小">
        <el-slider 
          v-model="data.borderRadius" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>播放设置</el-divider>

      <el-form-item label="自动播放">
        <el-switch v-model="data.autoplay" />
      </el-form-item>

      <el-form-item label="循环播放">
        <el-switch v-model="data.loop" />
      </el-form-item>

      <el-form-item label="静音播放">
        <el-switch v-model="data.muted" />
      </el-form-item>

      <el-form-item label="显示控制条">
        <el-switch v-model="data.showControls" />
      </el-form-item>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="styles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="styles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="styles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
    
    <ImagePicker ref="imagePickerRef" @select="handleImageSelect" />
  </div>
</template>

<script setup>
import ImagePicker from '@/components/ImagePicker/index.vue'
import { Delete, Picture } from '@element-plus/icons-vue'
import { ref } from 'vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update:data', 'update:styles'])

// 组件引用
const imagePickerRef = ref(null)

// 方法
function selectVideo() {
  // 这里可以添加选择视频的逻辑
  console.log('选择视频')
}

// ImagePicker组件现在内置了选择按钮，不需要这个方法了

// 处理图片选择
function handleImageSelect(image) {
  console.log('ImagePicker返回的图片对象:', image) // 添加调试日志
  
  // 确保image对象存在且包含url属性
  if (!image || !image.url) {
    console.error('无效的图片对象', image)
    return
  }
  
  let imageUrl = image.url
  if (imageUrl && !imageUrl.startsWith('http')) {
    if (imageUrl.startsWith('/profile')) {
      imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
    } else {
      imageUrl = import.meta.env.VITE_APP_BASE_API + imageUrl
    }
  }
  
  console.log('处理后的图片URL:', imageUrl) // 添加调试日志
  
  // 直接修改props.data中的属性
  props.data.coverUrl = imageUrl
  // 然后触发update事件
  emit('update:data', { ...props.data })
}

// ImagePicker组件现在内置了删除按钮，不需要这个方法了
</script>

<style lang="scss" scoped>
.video-panel {
  padding: 10px;
  
  .cover-image-container {
    display: flex;
    align-items: center;
    gap: 12px;
    
    .image-preview {
      width: 80px;
      height: 60px;
      border-radius: 4px;
      border: 1px solid #e4e7ed;
      position: relative;
      
      .preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
      }
      
      .delete-btn {
        position: absolute;
        top: -8px;
        right: -8px;
        z-index: 10;
        color: #fff;
        background-color: #ff4d4f;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &:hover {
          background-color: #ff7875;
        }
      }
    }
  }
}
</style>
